<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-07-15 14:20:44
 * @LastEditTime: 2023-07-17 22:17:56
 * @FilePath: \myblog\src\mviews\ArticleComment.vue
-->
<template>
  <div class="blogm-article--comment" ref="comment">
    <van-cell-group v-if="hasComment">
      <h3 class="blogm-comment--total">全部评论 {{comments.length}}</h3>
      <van-cell class="blogm-comment--item" center :value="item.date" v-for="item in comments" :key="item.id">
        <template #title>
          <div class="blogm-coment--msg">
            <div class="blogm-coment--img">
              <van-image
                width="40"
                height="40"
                round
                :src="avatar"
              />
            </div>
            <div class="blogm-coment--content">
              <span class="blogm-comment--nikname">{{item.uid.nikname}}</span>
              <span class="blogm-comment--content">{{item.content}}</span>
            </div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <van-empty description="暂无评论..." v-else/>
  </div>
</template>

<script>
export default {
  components:{
  },
  data(){
    return {
    }
  },
  props: {
    comments: {
      type: Array
    },
    avatar: {
      type: String
    }
  },
created(){
},
mounted(){
  
},
watch:{},
computed:{
  hasComment() {
    return this.comments && this.comments.length
  }
},
methods:{},
}
</script>
<style lang="scss" scoped>
  .blogm-article--comment {
    margin-top: 20px;
    padding: 20px 10px;
    background-color: #fff;
    .blogm-comment--total {
      font-size: 16PX;
    }

    .blogm-coment--msg {
      display: flex;
      .blogm-coment--content {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
      }
    }

  }
</style>